<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>预定</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
      a{
        text-decoration: none;
        color: #000;    /* 去除默认的颜色和点击后变化的颜色 */
        outline: none;	/* 去除旧版浏览器的点击后的外虚线框 */

      }
      header {
        height: 100px;
        width: 100%;
        line-height: 100px;
        background-color: rgba(201, 120, 21, .5);
        padding-left: 20px;
      }
      .big-box{
        height: 100%;
        display: flex;
      }
      .left-box{
        flex: 1;
        background-color: #233645;
      }

      .customer-box{
        position: relative;
        width: 100%;
        height: 150px;
        text-align: center;
      }
      .customer-box a{
        font-size: 20px;
        line-height: 180px;
        color: #ffffff;
      }
      .list-box{
        width: 100%;
        height: 603px;
      }
      .list-box ul{
        width: 100%;
        height: 180px;
      }
      .list-box ul li{
        width: 100%;
        height: 45px;
        text-align: center;
      }

      .list-box ul li a{
        color: #a7b1c2;
        line-height: 45px;
      }
      .head-box{
        width: 100%;
        height: 50px;
      }
      .span{
        float: right;
        width: 200px;
        height: 50px;
        padding-right: 10px;
        line-height: 50px;
      }
      .span a{
        color: #2f4050;
        font-weight: 700;
      }
      .img{
        width: 100%;
        height: 300px;
      }
      .img img{
        width: 100%;
        height: 100%;
      }
      .border table{
        margin: 50px auto 0px auto;
        color: #ffffff;
      }
      .border-tr1 {
        background-color: #2f4050;
      }
      .border-tr2{
        color: #233645;
      }
      .btn{
        width: 100px;
        height: 40px;
        background-color: #ea5e5e;
        color: #ffffff;
        font-size: 16px;
        border: none;
      }
      .right-bigBox{
        position: relative;
        flex: 7;
        background-color: #f3f3f4;
      }
      .border h1{
        width: 200px;
        margin: 50px auto;
        background-color: #233645;
        color: #f3f3f4;
        text-align: center;
      }
      .border p{
        margin: 45px 0px 0px 520px;
        font-weight: 700;
        font-size: 18px;
        color: #333333;
      }
      .border .revise{
        width: 100px;
        height: 50px;
        background-color: #233645;
        font-size: 20px;
        color: #f3f3f4;
        margin-left: 1000px;
      }
      .search{
        outline: none;
        width: 200px;
        height: 20px;
        margin: 10px;
      }
      .border{
        position: relative;
      }
      .search-box{
        position: absolute;
        top: -45px;
        left: 55px;
        color: #333333;
      }
      .select-opt1{
        position: absolute;
        top: -37px;
        left: 400px;
      }
      .select-opt1 input{
        outline: none;
      }

      .select-opt2{
        position: absolute;
        top: -37px;
        left: 670px;
      }
      .select-opt2 input{
        outline: none;
      }
      .select-but{
        position: absolute;
        top: -40px;
        left: 930px;
      }
      .addNewRoom{
        position: absolute;
        top: -40px;
        left: 1115px;

      }
      .addNew{
        width: 100px;
        height: 30px;
        background-color: #ea5e5e;
        border: none;
        color: #f3f3f4;
        font-size: 16px;
      }

      .valueBox{
        width: 100px;
        height: 30px;
        background-color: #ea5e5e;
        line-height: 30px;
        color: #f3f3f4;
        border: none;
        font-size: 16px;
      }
      .identity{
        position:absolute ;
        color: #f3f3f4;
        top: 35px;
        left: 60px;
        font-size: 20px;
      }
      .add{
        width: 50px;
        height: 30px;
        background-color: #ea5e5e;
        border: none;
        color: #f3f3f4;
        font-size: 16px;
      }
      .del{
        width: 50px;
        height: 30px;
        background-color: #ea5e5e;
        border: none;
        color: #f3f3f4;
        font-size: 16px;
      }
      .addRoom{
        position: absolute;
        right: 25px;
        top: 7px;
        background-color: #ea5e5e;
        border: none;
        color: #f3f3f4;
        height: 30px;
        width: 100px;
        font-size: 16px;
      }
      .cuo{
        position: absolute;
        top: -5px;
        right: 5px;
        font-size: 35px;
        display: none;
        border: none;
        background-color: rgba(255,255,255,0.1);
      }
      .border-tr2{
        position: relative;
      }
      .border-tr2:hover .cuo{
        display: block;
      }
      .valueBox2{
        width: 100px;
        height: 30px;
        background-color: #ea5e5e;
        line-height: 30px;
        color: #f3f3f4;
        border: none;
        font-size: 16px;
      }
    </style>
</head>

<body class="big-box">
<div class="left-box">
  <div class="customer-box">
    <a href="#">${cim.manageName},欢迎您</a><br>
  </div>
<%--  <div class="list-box">
    <ul>
      <li class="li"><a href="#">首页</a></li>
      <li class="li"><a href="#">我的订单</a></li>
      <li class="li"><a href="#">个人信息</a></li>
      <li class="li"><a href="#">退出登录</a></li>
    </ul>
  </div>--%>

</div>
<div class="right-bigBox">
  <div class="right-box1">
    <div class="border" id="information">
      <div class="search-box" >
        <input type="text" class="search" placeholder="请输入关键字">
        <button class="valueBox">搜索</button>
      </div>
      <div class="select-opt1">
        <select class="oneValue">
          <option value="type">房间类型</option>
          <option value="price">房间价格</option>
        </select>
        <input type="text" class="valueOne" placeholder="请输入关键字">
      </div>
      <div class="select-opt2">
        <select class="twoValue">
          <option value="peopleNumber">可住人数</option>
          <option value="bedNumber">床位数</option>
        </select>
        <input type="text" class="valueTwo" placeholder="请输入关键字">
      </div>
      <div class="select-but">
        <button class="valueBox2">搜索</button>
      </div>


      <table border="1px" cellspacing="0" width="90%" id="ListAll">
        <tr class="border-tr1">
          <th width="200px">客房</th>
          <th>房型</th>
          <th>可住人数</th>
          <th>房间详情</th>
          <th>房价</th>
          <th>剩余</th>
          <th>预定</th>
        </tr>

        <tr align="center" class="border-tr2">
          <td><img src="<%=request.getContextPath()%>/img/frontEndImg/1000.jpg" width="200px" height="150px"></td>
          <td>${houseType[0].houseType}</td>
          <td>1-2人</td>
          <td>${houseType[0].particulars}</td>
          <td>${houseType[0].price}</td>
          <td>${count4} 间</td>
          <td><a href="<%=request.getContextPath()%>/FrontEnd?type=houseType&id=4">
            <button class="btn" style="cursor: pointer">预定</button>
          </a></td>

        <tr align="center" class="border-tr2">
          <td><img src="<%=request.getContextPath()%>/img/frontEndImg/Big.jpg" width="200px" height="150px"></td>
          <td>${houseType[1].houseType}</td>
          <td>1-2人</td>
          <td>${houseType[1].particulars}</td>
          <td>${houseType[1].price}</td>
          <td>${count3} 间</td>
        <td><a href="<%=request.getContextPath()%>/FrontEnd?type=houseType&id=3">
          <button class="btn" style="cursor: pointer">预定</button>
        </a></td>
        <tr align="center" class="border-tr2">
          <td><img src="<%=request.getContextPath()%>/img/frontEndImg/One.jpg" width="200px" height="150px"></td>
          <td>${houseType[2].houseType}</td>
          <td>1-2人</td>
          <td>${houseType[2].particulars}</td>
          <td>${houseType[2].price}</td>
          <td>${count2}间</td>
          <td><a href="<%=request.getContextPath()%>/FrontEnd?type=houseType&id=2">
            <button class="btn" style="cursor: pointer">预定</button>
          </a></td><tr align="center" class="border-tr2">
        <td><img src="<%=request.getContextPath()%>/img/frontEndImg/Two.jpg" width="200px" height="150px"></td>
        <td>${houseType[3].houseType}</td>
        <td>1-2人</td>
        <td>${houseType[3].particulars}</td>
        <td>${houseType[3].price}</td>
        <td>${count1} 间</td>
        <td><a href="<%=request.getContextPath()%>/FrontEnd?type=houseType&id=1">
          <button class="btn" style="cursor: pointer">预定</button>
        </a></td>

      </table>
    </div>
  </div>
</div>
</body>

</html>
